<template>
  <view class="couponPopup">
    <u-popup :show="childShow" :round="10" mode="bottom">
      <view class="title">
        优惠券
        <!-- 关闭标签 -->
        <text class="font_family icon-guanbi_tongyong_1" @click="closeFn" />
      </view>
      <view class="content">
        <view style="max-height: 500rpx;overflow-y: auto;">
          <!-- 可领取的 -->
          <view class="canbeClaimed">
            <view class="nav">可领取的券</view>
            <view v-for="(item, index) in canbeClaimedList" :key="index" class="canbeClaimed-box">
              <view v-if="item.couponUseStatus == 0" class="left-box">
                <view><text>￥</text><text class="price-fontsize">{{ item.couponValue }}</text></view>
                <view v-if="item.couponUseCondition !=0" class="mj-text"> {{ '满'+Math.trunc(item.couponUseCondition)+'元可用' }}</view>
                <view v-else class="mj-text">不限订单金额使用</view>
              </view>
              <view v-if="item.couponUseStatus == 0" class="right-box">
                <view class="name">
                  <!-- 运费券 -->
                  <view v-if="item.couponType ==10 " class="t-icon t-icon-yunfeiquan_tongyong_1" />
                  <!-- 满减标签 -->
                  <view v-if="item.couponType ==20 " class="t-icon t-icon-manjianquan_tongyong_1" />
                </view>
                <view v-if="item.useBegtime || item.useEndtime" class="time">{{ item.useBegtime}} -{{item.useEndtime }}</view>
                <text class="couName">{{ item.applCategoryIntroduce }}</text>
                <view v-if="item.receiveState == 1 " class="button" @click="getReceCoupons(item)">立即领取</view>
              </view>
            </view>
            <view v-if="canbeClaimedList.length ==0">暂无可领取的券</view>
          </view>
          <!-- 已领取的 -->
          <view class="canbeClaimed">
            <view class="nav">已领取的券</view>
            <view v-for="(item, index) in receivedList" :key="index" class="canbeClaimed-box">
              <view v-if="item.couponUseStatus == 0" class="left-box">
                <view><text>￥</text><text class="price-fontsize">{{ item.couponValue }}</text></view>
                <view v-if="item.couponUseCondition !=0" class="mj-text"> {{ '满'+Math.trunc(item.couponUseCondition)+'元可用' }}</view>
                <view v-else class="mj-text">不限订单金额使用</view>
              </view>
              <view v-if="item.couponUseStatus == 0" class="right-box">
                <view class="name">
                  <!-- 运费券 -->
                  <view v-if="item.couponType ==10 " class="t-icon t-icon-yunfeiquan_tongyong_1" />
                  <!-- 满减标签 -->
                  <view v-if="item.couponType ==20 " class="t-icon t-icon-manjianquan_tongyong_1" />
                </view>
                <view v-if="item.useBegtime || item.useEndtime" class="time">
                  {{ item.useBegtime}} -{{item.useEndtime }}
                  </view>
                <text class="couName">{{ item.applCategoryIntroduce }}</text>
                <view v-if="item.receiveState == 0" class="button button-cur">已领取</view>
              </view>
            </view>
            <view v-if="receivedList.length ==0">暂无已领取的券</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import coupon from '@/components/coupon'
import { getReceCoupons } from '@/api/shopDetail';
export default {
  components: {
    coupon
  },
  props: {
    showCoupon: {
      type: Boolean,
      default: false
    },
    couponsList: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      childShow: false,
      canbeClaimedList: [], //可领取的存值
      receivedList: [], //已领取的存值
      newcouponsList: []
    }
  },
  watch: {
    showCoupon(newVal, oldVal) {
      if (newVal != oldVal) {
        this.childShow = newVal
      }
    },
    couponsList(newVal, oldVal) {
      if (newVal != oldVal) {
        this.newcouponsList = newVal
        //** receiveState  领取状态:  0 : 已领取；1：未领取
        this.canbeClaimedList = this.newcouponsList.filter(item => item.receiveState == 1)
        this.receivedList = this.newcouponsList.filter(item => item.receiveState == 0)
      }
    },

  },
  mounted() {

  },
  onload() {
  },
  methods: {

    closeFn() {
      this.$emit('update:showCoupon', false)
    },
    getReceCoupons(item) {
      const { accountType, memberId, mainCustomerId } = this.vuex_memberInfo
      const params = {
        couponCode: item.couponCode,
        customer_id: mainCustomerId,
        account_type: accountType,
        member_id: memberId
      }
      getReceCoupons(params).then((res) => {
        if (res.errorCode == '0') {
          this.couponsList.forEach(olditem => {
            if (olditem.couponCode == item.couponCode) {
              olditem.receiveState = 0
            }
          });
          //** receiveState  领取状态:  0 : 已领取；1：未领取
          this.canbeClaimedList = this.newcouponsList.filter(item => item.receiveState == 1)
          this.receivedList = this.newcouponsList.filter(item => item.receiveState == 0)
          console.log('优惠券777777777')
          console.log(this.newcouponsList)
          this.$u.toast('领取成功')
        } else {
          this.$u.toast(res.msg)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.couponPopup {
  color:$uni-text-color;
  .title {
    height: 88rpx;
    padding: 0rpx 32rpx;
    line-height: 88rpx;
    display: flex;
    justify-content: space-between;
    font-size: $uni-font-size-base;
    font-weight: bold;
    border-bottom: 2rpx solid $uni-border-gray;
    .font_family {
      font-size: 48rpx;
      font-weight: normal;
    }
  }
  .content {
    padding:0 32rpx 80rpx;
    .canbeClaimed{
      .nav{
        font-size: $uni-font-size-base;
        padding: 22rpx 0 16rpx;
      }
      .canbeClaimed-box{
        background: #fedfda;
        border-radius:$uni-border-radius-default;
        position: relative;
        margin-bottom: 26rpx;
        display: flex;
        justify-content: space-between;
        .left-box{
          width: 192rpx;
          height: 144rpx;
          display: flex;
          flex-direction:column;
          justify-content:center;
          text-align: center;
          background: linear-gradient(119.84deg, #FF94A1 1.91%, #FF5533 100%);
          border-radius:$uni-border-radius-default 0 0 $uni-border-radius-default;
          color:$uni-text-color-inverse;
          font-size: $uni-font-size-sm;
          .price-fontsize{
            font-size: 48rpx;
          }
        }
        .right-box{
          width: calc(100% - 240rpx);
          padding:26rpx 0 0 48rpx;
          display: flex;
          flex-direction:column;
          justify-content:center;
          .name{
            padding-bottom: 0 0 8rpx;
            .t-icon{
              width: 74rpx;
              height: 34rpx;
              margin-right: 8rpx;
              background-position: 0 0!important;
            }
          }
          .time{
            font-size:20rpx;
            color: $uni-text-color-tips;
          }
          .couName{
            font-size: 20rpx;
            width: 298rpx;
            color: $uni-text-color-grey;
          }
          .button {
            background:$uni-bg-color-orange;
            border-radius:$uni-border-radius-default;
            color:$uni-text-color-inverse;
            font-size:$uni-font-size-sm;
            width: 130rpx;
            height: 48rpx;
            line-height: 48rpx;
            position: absolute;
            top:54rpx;
            right:24rpx;
            text-align: center;
            border: 0;
          }
          .button-cur{
            background: none;
            color: $uni-text-color-orange;
          }
        }
      }
      .canbeClaimed-box:after{
        position: absolute;
        background:$uni-bg-color;
        width: 24rpx;
        height: 24rpx;
        border-radius: $uni-border-radius-circle;
        top:-12rpx;
        left: 180rpx;
        content: ' ';
      }
      .canbeClaimed-box:before{
        position: absolute;
        background:$uni-bg-color;
        width: 24rpx;
        height: 24rpx;
        border-radius: $uni-border-radius-circle;
        bottom:-12rpx;
        left: 180rpx;
        content: ' ';
      }
    }
  }
}
</style>
